<template>
    <div class="date-container">
        <div class="date-wrap">
            <div class="to-today" @click.stop="setDay(now.valueOf())">今</div>
            <div class="date-mon-container flex flex-center">
                <div class="date-mon-pre" @click.stop="subtractDay"></div>
                <div class="date-mon">{{ nowDay }}</div>
                <!-- <div class="date-mon">2022年5月7日</div> -->
                <div class="date-mon-next" @click.stop="addDay"></div>
            </div>
            <div class="date-calendar-container">
                <div class="date-calendar-wrap">
                    <template v-for="(day, index) in calendar_days">
                        <div class="date-day">
                            <div
                                class="date-week"
                            >{{ index < 7 ? '周' + convertToChineseDay(day.day()) : '' }}</div>
                            <div
                                class="date-date"
                                :class="{ today: now.isSame(day, 'D'), 'grey-day': !currentDay.isSame(day, 'M'), 'select-day': currentDay.isSame(day, 'D') }"
                                @click.stop="setDay(day.valueOf())"
                            >
                                {{
                                    day.format('DD')
                                }}
                            </div>
                            <div class="date-todu-list">
                                <!-- <div class="date-todu"></div> -->
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div class="drag-down" @click="updateDateState"></div>
    </div>
</template>
<script setup>
import { ref, inject, computed, onBeforeMount } from 'vue'
import dayjs from 'dayjs'
import { useStore } from 'vuex'

const { state, updateDateState } = inject('DateState');
const store = useStore()

// 今天
const now = ref(dayjs())
// 当前选择日期
// const currentDay = ref(dayjs());
const currentDay = computed(() => dayjs(store.state.day.currentDay))

// 日历日期列表
const calendar_days = ref([]);
const nowDay = computed(() => {
    return currentDay.value.format('YYYY年MM月')
})

// 显示下个月
function addDay() {
    store.dispatch('day/nextMonth')
    setDateCalendar()
}

// 显示上个月
function subtractDay() {
    store.dispatch('day/lastMonth')
    setDateCalendar()
}

// 转换星期
function convertToChineseDay(number) {
    var N = [
        "日", "一", "二", "三", "四", "五", "六"
    ];
    return N[number]
}

function setDay(day) {
    store.dispatch('day/setCurrentDay', day)
    setDateCalendar()
}

// 日期列表
function setDateCalendar() {
    calendar_days.value = []
    let firstDay = currentDay.value.startOf('M');
    let firstDayWeek = firstDay.day();
    let endDay = currentDay.value.endOf('M');
    let endDayWeek = endDay.day();
    let i = 0;

    while (i < firstDayWeek) {
        calendar_days.value.push(firstDay.subtract(firstDayWeek - i, 'day'));
        i++;
    }

    while (firstDay.isBefore(endDay)) {
        calendar_days.value.push(firstDay);
        firstDay = firstDay.add(1, 'day');
    }

    while (endDayWeek < 6) {
        calendar_days.value.push(firstDay);
        firstDay = firstDay.add(1, 'day')
        endDayWeek++;
    }
}

onBeforeMount(setDateCalendar);
</script>
<script>
export default {
    name: "DateOpen",
}
</script>
<style lang="scss" scoped>
.flex {
    display: flex;
}

.flex-center {
    justify-content: center;
}

.date-container {
    background-color: white;
    border-radius: 20px;
    // padding: 24px 0;
    height: 500px;
    // width: 932px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    overflow: hidden;
    box-shadow: var(--box-shadow);

    .date-wrap {
        // padding: 0 134px;
        display: flex;
        flex-direction: column;
        position: relative;

        .to-today {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: absolute;
            top: 20px;
            right: 60px;
            background-color: white;
            border: 2px solid;
            border-radius: 50%;
            cursor: pointer;

            &:hover {
                background-color: #ffeb3b;
            }
        }

        .date-mon-container {
            display: flex;
            align-items: center;
            margin: 31px 0;

            .date-mon-pre {
                height: 5px;
                border: 10px solid;
                border-left: 0;
                box-sizing: border-box;
                border-color: transparent;
                border-right-color: #c4c4c4;
            }

            .date-mon {
                font-size: 24px;
                font-weight: bold;
                margin: 0 95px;
            }

            .date-mon-next {
                height: 5px;
                border: 10px solid;
                border-right: 0;
                box-sizing: border-box;
                border-color: transparent;
                border-left-color: #c4c4c4;
            }
        }

        .date-calendar-container {
            flex: 0 0 330px;
        }

        .date-calendar-wrap {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
        }

        // .date-calendar {
        // display: flex;
        // }
        .grey-day {
            color: #707070 !important;
        }

        .date-day {
            // height: 60px;
            width: 40px;
            box-sizing: border-box;
            font-size: 16px;
            text-align: center;
            margin: 0 28px;
            color: black;
            aspect-ratio: 1/1;

            .date-date {
                // width: 40px;
                line-height: 40px;
                margin: 9px 0 2px;
                font-size: 24px;
                font-weight: bolder;
                border-radius: 50%;
                box-sizing: border-box;
                aspect-ratio: 1/1;
                cursor: pointer;

                &:hover {
                    // background-color: #ffeb3b;
                    background-color: #c4c4c4;
                }
            }

            .today {
                background-color: #ffeb3b !important;
            }

            .select-day {
                // box-sizing: border-box;
                background-color: #c4c4c4;
            }

            .date-todu-list {
                display: flex;
                justify-content: center;

                .date-todu {
                    width: 5px;
                    height: auto;
                    aspect-ratio: 1/1;
                    border-radius: 50%;
                    border: 2px solid black;
                }
            }
        }
    }

    .drag-down {
        width: 45px;
        height: 6px;
        // border: 3px solid rgb(116, 116, 116);
        background-color: rgb(116, 116, 116);
        border-radius: 3px;
    }
}
</style>
